<template>
	<view class="reward-pool">
		<NavBar :isBack="true"></NavBar>
		<view class="content">
			<view class="header-area">
				<view class="title">邀好友</view>
				<view class="slogan">
					<view>成为服务商共享</view>
					<view class="cash">百万现金</view>
					<view>奖励</view>
				</view>
			</view>
			<view class="middle-area">
				<view class="bg">
					<view>奖励池已累计</view>
					<view class="price">{{ price }}</view>
					<view>
						<view class="progress-bar">
							<view class="item">
								<view class="progress">
									<view class="current-progress" :style="currentProStyle"></view>
									<view class="dot left" :class="{ 'active': (currentPrice >= startPrice) && true }">
									</view>
									<view class="dot middle" :class="{ 'active': (currentPrice >= middPrice) && true }">
									</view>
									<view class="dot right" :class="{ 'active': (currentPrice >= endPrice) && true }"></view>
								</view>
								<view class="price-row">
									<view class="cycle">{{ startPrice }}</view>
									<view class="cycle">{{ middPrice }}</view>
									<view class="cycle">{{ endPrice }}</view>
								</view>
							</view>
							<view class="btn">
								立即邀请好友
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer-area">
				<view class="title">奖励池获得规则</view>
				<view class="text">
					规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案规则文案
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getRewardPool } from '@/api/my'
import {
	reactive,
	toRefs,
	ref
} from 'vue'
const state = reactive({
	price: 0,
	startPrice: 10,
	middPrice: 50,
	endPrice: 100,
	currentPrice: 80,
})
const currentProStyle = ref({
	width: ((state.currentPrice / state.endPrice) * 100) + '%',
})
async function getRewardPoolData () {
	const res = await getRewardPool()
	state.price = res.data
	console.log(res)
}
getRewardPoolData()
const {
	price,
	startPrice,
	middPrice,
	endPrice,
	currentPrice
} = toRefs(state)
</script>

<style lang="scss" scoped>
.reward-pool {
	.content {
		position: relative;
		z-index: 1;
		padding: 36rpx 36rpx 120rpx;

		.header-area {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			margin-bottom: 50rpx;

			.title {
				font-weight: 800;
				font-size: 80rpx;
				color: #FFFFFF;
				text-shadow: 0px 2px 1px #08908e;
				margin-bottom: 22rpx;
				// text-shadow: 5px 5px 7px #16ACAA;
			}

			.slogan {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 525rpx;
				height: 59rpx;
				background: linear-gradient(91deg, #16ACAA 0%, #089C9A 100%);
				border-radius: 33rpx 33rpx 33rpx 33rpx;
				border: 3rpx solid #D8FFF8;
				color: #FFFFFF;
				font-weight: 500;
				font-size: 32rpx;

				.cash {
					font-weight: bold;
					color: #FFE500;
					margin: 0rpx 20rpx;
				}
			}
		}

		.middle-area {
			width: 678rpx;
			height: 490rpx;
			background: linear-gradient(180deg, #15ACA9 0%, #099D9A 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border: 2rpx solid;
			border-image: linear-gradient(180deg, rgba(255, 250, 241, 1), rgba(255, 255, 255, 0)) 2 2;
			border-radius: 22rpx 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 51rpx;

			.bg {
				text-align: center;
				background-image: url('@/static/my/award.png');
				background-size: cover;
				width: 650rpx;
				height: 459rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;

				.price {
					font-weight: 800;
					font-size: 96rpx;
					color: #FF470D;
					margin-top: 40rpx;
				}
			}

			.progress-bar {
				margin-top: 31rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.progress {
						position: relative;
						width: 526rpx;
						height: 12rpx;
						background: #dcdcdc;
						margin-left: 4rpx;

						.current-progress {
							width: 0rpx;
							height: 100%;
							position: absolute;
							background: #58dbcf;
						}

						.dot {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							width: 19rpx;
							height: 19rpx;
							border-radius: 50%;
							background: #dcdcdc;
						}

						.left {
							left: -2rpx;
						}

						.middle {
							left: 50%;
							transform: translate(-50%, -50%);
						}

						.right {
							right: -2rpx;

						}

						.active {
							background: #58dbcf;
						}
					}

					.price-row {
						width: 560rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-weight: bold;
						font-size: 20rpx;
						color: #787878;
						margin-top: 10rpx;
					}

				}

				.btn {
					margin: 44rpx auto 0rpx;
					text-align: center;
					width: 580rpx;
					height: 74rpx;
					line-height: 74rpx;
					background: #FF470D;
					border-radius: 500rpx 500rpx 500rpx 500rpx;
					font-weight: 800;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}
		}

		.footer-area {
			width: 678rpx;
			height: 510rpx;
			background: #FFFFFF;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			padding: 48rpx 34rpx 34rpx;
			box-sizing: border-box;

			.title {
				position: relative;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 20rpx;

				&:before {
					position: absolute;
					content: "";
					top: 50%;
					transform: translateY(-50%);
					right: 70rpx;
					width: 78rpx;
					height: 1rpx;
					background: #58DBCF;
				}

				&::after {
					position: absolute;
					content: "";
					top: 50%;
					transform: translateY(-50%);
					left: 70rpx;
					width: 78rpx;
					height: 1rpx;
					background: #58DBCF;
				}
			}

			.text {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				line-height: 41rpx;
			}
		}
	}
}
</style>